<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chercOut</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/res/css/checkOut.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/res/css/checkIn.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/res/css/selectInformation.css">
    <script src="${pageContext.request.contextPath }/res/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath }/res/js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body class="bodyType">
    <div class="title">
        <samp>退房管理</samp>
    </div>
     <!-- 续租 -->
    <div style="width: 1000px;" id="checkOut" v-cloak>
        <div class="total">
            <div class="checkOutTitle">
                续租
            </div>
            <hr style="color: #f1f1f1; width: 100%;">
            <!-- 检测应缴费 -->
                <div class="relet">
                    <div>
                        <label for="reletRoom">房号：</label>
                        <input type="text" v-model="reletRoomNum"  style="height: 20px;" name="reletRoom" id="reletRoom">
                        <label for="preDay" style="padding-left: 39px;">续租天数：</label>
                        <input type="text" v-model="preDay" style="height: 20px;" name="preDay" id="preDay">
                       
                        <!-- 应付款框 -->
                        <label  style="padding-left: 39px;">应缴付：</label>
                        <div class="perpay" id="perpay">{{perpay}}</div>
    
                        <input type="button" @click="detection" style=" height: 25px;margin-left: 39px;" value="检测">
                    </div>
                    <div style="margin-top: 6px;">
                        <label for="paid">实付：</label>
                        <input type="text" v-model="pay" style="height: 20px;" name="paid" id="paid">
                        <input type="button" @click="relet" value="续租">
                    </div>
                </div>
        </div>

        <!-- 结账 -->
        <div class="total">
            <div class="checkOutTitle">
                结账
            </div>
            <hr style="color: #f1f1f1; width: 100%;">
                <div class="relet">
                    <div style="margin-top: 6px;">
                        <label for="payment">房号：</label>
                        <input type="text" v-model="overRoomNum" style="height: 20px;" name="payment" id="payment">
                        <input type="button" @click="settleAccounts" value="结账">
                    </div>
                    <!-- 付款框 -->
                    <div style="margin-top: 6px;">
                        <label >退款：</label>
                        <div class="perpay" >{{repay}}</div>
                    </div>
                </div>
        </div>
        <div class="total">
            <div class="checkOutTitle">
                未结算
            </div>
            <hr style="color: #6d5a5a; width: 100%;">
            <div class="userCondition">
                <label for="reletRoom2">房号：</label>
                <input type="text" class="roomInput" v-model="roomNum"  style="height: 20px;" name="reletRoom" id="reletRoom2">
                <input type="button" @click="uncheckByRoomNum" style="width: 50px; height: 26px; " value="查找">
                <label for="reletRoom1" style="margin-left: 50px;">姓名：</label>
                <input type="text" class="roomInput" v-model="name"  style="height: 20px;" name="reletRoom" id="reletRoom1">
                <input type="button" @click="uncheckByName" style="width: 50px; height: 26px; " value="查找">
            </div>
            <div class="userCondition">
                <div style="border:  #f1f1f1 solid 1px;width: 65%;">
                    <table style="padding: 2px;" class="selectTable">
                        <tr>
                            <td>结算编号</td>
                            <td>房号</td>
                            <td>姓名</td>
                            <td>身份证</td>
                            <td>电话号码</td>
                            <td>需退定金</td>
                        </tr>
                        <tr v-for="item in uncheckedList">
                            <td>{{item.orderId}}</td>
                            <td>{{item.roomNum}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.identity}}</td>
                            <td>{{item.telephone}}</td>
                            <td>{{item.momey}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 结账 -->
        <div class="total">
            <div class="checkOutTitle">
                结算
            </div>
            <hr style="color: #f1f1f1; width: 100%;">
                <div class="relet">
                    <div style="margin-top: 6px;">
                        <label for="payment1">结算编号：</label>
                        <input type="text" v-model="orderId" style="height: 20px;" name="payment" id="payment1">
                        <input type="button" @click="finishUncheck"  value="结算">
                    </div>
                    <!-- 付款框 -->
                    <div style="margin-top: 6px;">
                        <label>退款：</label>
                        <div class="perpay">{{clearing}}</div>
                    </div>
                </div>
        </div>
    </div>
    <script src="${pageContext.request.contextPath }/res/js/checkOut.js"></script>
</body>
</html>